<template>
  <div class="page meeting">
    <div class="page-container">
      <el-row :gutter="15" type="flex" style="width: 100%;height: 100%;margin: 0">
        <el-col :span="8" class="col">
          <el-row class="row">
            <Card title="本月议事会总览">
              <MeetingGeneralView />
            </Card>
          </el-row>
          <el-row class="row">
            <Card title="最新议事会记录">
              <MeetingRecord />
            </Card>
          </el-row>
        </el-col>
        <el-col :span="8" class="col">
          <el-row class="row">
            <Card title="问题处理跟踪">
              <ProblemHandling />
            </Card>
          </el-row>
          <el-row class="row">
            <Card title="当前待处理问题">
              <PendingProblem />
            </Card>
          </el-row>
        </el-col>
        <el-col :span="8" class="col">
          <el-row class="row">
            <Card title="本月普法宣传重点">
              <PropagandaFocus />
            </Card>
          </el-row>
          <el-row class="row">
            <Card title="居民法律咨询统计">
              <LegalAdvice />
            </Card>
          </el-row>
          <el-row class="row">
            <Card title="议事会成果展示">
              <MeetingAchievement />
            </Card>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import Card from '@/components/Card.vue'
import MeetingGeneralView from '@/components/Meeting/MeetingGeneralView.vue'
import MeetingRecord from '@/components/Meeting/MeetingRecord.vue'
import ProblemHandling from '@/components/Meeting/ProblemHandling.vue'
import PendingProblem from '@/components/Meeting/PendingProblem.vue'
import PropagandaFocus from '@/components/Meeting/PropagandaFocus.vue'
import LegalAdvice from '@/components/Meeting/LegalAdvice.vue'
import MeetingAchievement from '@/components/Meeting/MeetingAchievement.vue'

export default {
  components: { MeetingAchievement, LegalAdvice, PropagandaFocus, PendingProblem, ProblemHandling, MeetingRecord, MeetingGeneralView, Card }

}
</script>
<style lang="scss" scoped>
.page.meeting{
  .page-container{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    .col{
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      .row{
        width: 100%;
        height: calc(100%/3 - 10px);
      }
    }
    .col:nth-child(1),.col:nth-child(2){
      .row{
        height: calc(100%/2 - 10px);
      }
    }
  }
}
</style>
